<template>
  <div>
    <myheader>

    </myheader>
    <table>
      <tr>
        <th>活动名称:</th>
        <td>
          <input type="text" v-model="title">
        </td>
      </tr>
      <tr>
        <th>活动链接:</th>
        <td>
          <input type="text" v-model="link">
        </td>
      </tr>
      <tr>
        <th>添加图片文件:</th>
        <td><input type="file" id="img"></td>
      </tr>
      <tr>
        <Button @click="addpics">添加</Button>
      </tr>
    </table>
    <Table :datas="inserpics">
      <tr>
        <th>ID</th>
        <th>活动名称</th>
        <th>活动链接</th>
        <th>图片链接</th>
        <th>操作</th>
      </tr>
      <tr v-for="i in inserpics">
        <td>{{ i.id }}</td>
        <td>{{ i.title }}</td>
        <td>{{ i.link }}</td>
        <td>{{ i.image }}</td>
        <td>
          <Button @click="imgdel(i.id)">删除</Button>
          <Button @click="get_upd(i.id)">修改</Button>
        </td>
      </tr>
    </Table>
    <Table v-show="show">
      <tr>
        <th>活动名称:</th>
        <td>
          <input type="text" v-model="newtitle">
        </td>
      </tr>
      <tr>
        <th>新的活动链接:</th>
        <td>
          <input type="text" v-model="newlink">
        </td>
      </tr>
      <tr>
        <th>新的活动图片:</th>
        <td><input type="file" id="newimg"></td>
      </tr>
      <tr>
        <Button @click="upd">修改</Button>
      </tr>
    </Table>
    <mytail>

    </mytail>
  </div>
</template>

<script>
  import myheader from "./myheader";
  import mytail from "./mytail";
  import {config} from "../config.js";

  export default {
    name: "inserpics",
    components: {
      'myheader': myheader,
      'mytail': mytail
    },
    data() {
      return {
        title: '',
        link: '',
        inserpics: [],
        show: 0,
        newtitle: '',
        newlink: '',
        upid: ''
      }
    },
    methods: {
      addpics: function () {
        let file = (document.getElementById('img')).files[0];
        let data = new FormData();
        data.append('title', this.title);
        data.append('link', this.link);
        data.append('img', file, file.name);
        this.axios.post(config['inserpic'], data).then(res => {
          // console.log(res.data);
          this.$Message(res.data.data);
          this.get_img()
        })
      },
      get_img: function () {
        this.axios.get(config['inserpic']).then(res => {
          this.inserpics = res.data
        })
      },
      imgdel: function (id) {
        this.axios.delete(config['inserpic'], {params: {id: id}}).then(res => {
          // console.log(res.data);
          this.$Message(res.data.data);
          this.get_img()
        })
      },
      get_upd: function (id) {
        this.axios.get(config['updpic'], {params: {id: id}}).then(res => {
          this.newtitle = res.data.title;
          this.newlink = res.data.link;
          this.upid = res.data.id;
          this.show = 1
        })
      },
      upd: function (id) {
        let newimg = (document.getElementById('newimg')).files[0];
        let data = new FormData();
        data.append('id', this.upid);
        data.append('title', this.newtitle);
        data.append('link', this.newlink);
        if (newimg != null) {
          data.append('img', newimg, newimg.name);
        }
        this.axios.post(config['updpic'], data).then(res => {
          // console.log(res.data)
          this.$Message(res.data.data);
          this.get_img();
          this.show = 0;
        })
      }
    },
    mounted() {
      this.get_img()
    }
  }
</script>

<style scoped>

</style>
